<template>
	<view>
		<!-- 数据渲染 -->
		<view class="good" v-if="goodsList.length > 0">
			<view class="" v-for="(item,index) in goodsList" :key="index" @click="gotoDetail(item)">
				<view class="icon">
					<image mode="aspectFit" src="../../static/商品.png"></image>
					<text>优购</text>
				</view>
				<view class="good-item">
					<view class="left">
	<!-- 					<muqian-lazyLoad mode="aspectFit"   :src="item.goods_small_logo"
							errorSrc="../../static/350a3e60b6549b3c.jpg" ></muqian-lazyLoad> -->
						<image mode="aspectFit" :src="item.goods_small_logo" 	:show-menu-by-longpress='true' ></image>
					</view>
					<view class="right">
						<view class="goods_name">{{item.goods_name}}</view>
						<view class="goods_price">￥&nbsp{{item.goods_price | goods_price}}</view>
					</view>
				</view>
			</view>
			<!-- 加载 -->
			<u-loading-icon :show="isloading" :text="loadmoreText" textSize="14"></u-loading-icon>
			<view class="no-more" v-if="total == goodsList.length">
				没有更多了
			</view>
		</view>
		<!-- 数据为空 -->
		<view v-else>
			<myEmpty></myEmpty>
		</view>

		<!-- 返回顶部 -->
		<u-back-top :scrollTop="scrollTop" :iconStyle="iconStyle" :customStyle="customStyle1"></u-back-top>

	</view>
</template>

<script>
	import myMixins from "../../mixins/filterPrice.js"
	export default {

		data() {
			return {
				// 请求参数对象
				queryObj: {
					query: '', // 查询关键词
					cid: '', // 商品分类Id      
					pagenum: 1, // 页码值      
					pagesize: 10 // 每页显示多少条数据
				},
				goodsList: [], // 商品列表的数据
				total: 0, // 总数量，用来实现分页
				status: 'loadmore', //加载状态
				isloading: false, // 是否正在请求数据
				// uview加载，顶部配置
				loadmoreText: "加载更多",
				scrollTop: 0,
				customStyle1: {
					backgroundColor: "#3c9cff"
				},
				iconStyle: {
					fontSize: '32rpx',
					color: "#fff",

				}
			};
		},
		mixins: [myMixins],
		onLoad(options) {
			uni.$setNavigationBarColor()
			this.queryObj.query = options.keyword || ''
			this.queryObj.cid = options.cid || ''

			this.getGoodsList() // 调用获取商品列表数据的方法
		},
		methods: {

			// 获取商品列表数据的方法
			async getGoodsList(Callback) {
				if (this.isloading) return;
				this.isloading = true
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
				if (res.meta.status !== 200) return uni.$showToast(res.meta.msg, "error");
				//累加数据
				if (this.goodsList.length == 0) {
					this.goodsList = res.message.goods
					uni.$showToast(res.meta.msg)
					Callback && Callback() //回调函数
				} else {
					this.goodsList = [...this.goodsList, ...res.message.goods]
				}
				this.total = res.message.total
				this.goodsList.forEach(item=>{
					if(item.goods_small_logo == ''){
						let pics_big = [
							{pics_big:'../../static/feature/imgLoadding.jpg'},
							{pics_big:'../../static/feature/3f2e4777713bb40c.jpg'},
							{pics_big:'../../static/feature/5a64f7a76f57486d.jpg'},
						
						]
						let randomInt = parseInt(Math.random()*3)
						item.goods_small_logo = pics_big[randomInt].pics_big
					}
				})
				
				this.isloading = false
			},
			//跳转详情
			gotoDetail(item) {
				uni.navigateTo({
					url: '/subGoodsDetail/goods_detail/goods_detail?goods_id=' + item.goods_id
				})
			},
		},
		// 下拉刷新的事件
		onPullDownRefresh() {
			// 1. 重置关键数据
			this.queryObj.pagenum = 1
			this.total = 0
			this.isloading = false
			this.goodsList = []

			// 2. 重新发起请求,函数回调
			this.getGoodsList(() => {
				uni.stopPullDownRefresh()
			})
		},
		// 触底的事件
		onReachBottom() {
			//数据	没有更多了

			if (this.total == this.goodsList.length) {
				this.isloading = false
				return;
			} else {

				this.queryObj.pagenum += 1
				this.getGoodsList()
			}



		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
	}
</script>

<style lang="scss" scoped>
	.no-more {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}

	.good {
		padding: 10px 5px;

		.icon {
			display: flex;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}

			text {
				color: lightgrey;
				font-size: 2rpx;

			}
		}

		.good-item {
			display: flex;
			border-bottom: 2rpx solid #f0f0f0;
			margin: 40rpx 20rpx;

			.left {
				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 20rpx;

				.goods_name {
					font-size: 26rpx;
					font-weight: 600;
				}

				.goods_price {
					font-size: 32rpx;
					color: #c00000;
				}
			}
		}
	}
</style>